<template>
  <van-popup v-model="value" class="popup" :close-on-click-overlay='false'>
    <div class="tip" v-if="type == 1">
      <div class="top">
        <img src="./img/icon.png" alt class="icon" />
      </div>
      <div class="title">尊敬的用户</div>
      <div class="content">您还未进行身份认证，暂时无法使用该功能！</div>
      <div class="toAuth" @click="toAuth">去认证</div>
    </div>
    <div class="tip" v-if="type == 2">
      <div class="top">
        <img src="./img/icon.png" alt class="icon" />
      </div>
      <div class="title">尊敬的用户</div>
      <div class="content">您所在区域血浆站暂未在本平台开放，请您持续关注！</div>
      <div class="toAuth" @click="sure">确定</div>
    </div>
  </van-popup>
</template>

<script>
import router from '@/router'
export default {
  data() {
    return {
      value:false,
      type:1
    };
  },
  created() {
    console.log('popup')
    console.log(this)
  },
  components: {
  },
  methods:{
    show(opt){
      this.type = opt.type || 1;
      this.value = true;
    },
    close(){
      this.value = false;
    },
    sure() {
      this.close();
      router.push('/home');
    },
    toAuth() {
      this.close();
      router.push('/userInfo');
    }
  }
};
</script>

<style lang='scss'>
.tip {
  width: 6.4rem /* 480/75 */;
  height: 7.6rem /* 570/75 */;
  background: red;
  background: url(./img/bg.png) no-repeat;
  background-size: cover;
  padding: 0 0.6rem /* 45/75 */;
}
.popup {
  text-align: center;
  border-radius: 0.4rem /* 30/75 */;
  background: transparent!important;
  .top {
    padding-top: 0.666667rem /* 50/75 */;
    height: 3rem /* 225/75 */;
  }
  .icon {
    width: 1.173333rem /* 88/75 */;
    height: 1.173333rem;
  }
  .title {
    font-size: 0.56rem /* 42/75 */;
    font-weight: 500;
    color: rgba(0, 136, 255, 1);
    margin-bottom: 0.6rem /* 45/75 */;
  }
  .content {
    font-size: 0.373333rem /* 28/75 */;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 0.56rem /* 42/75 */;
    margin-bottom: 0.373333rem /* 28/75 */;
  }
  .toAuth {
    margin: 0 auto;
    background: #4482ff;
    width: 4rem /* 300/75 */;
    height: 1.066667rem /* 80/75 */;
    line-height: 1.066667rem /* 80/75 */;
    text-align: center;
    color: #fff;
    font-size: 0.426667rem /* 32/75 */;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    border-radius: 0.533333rem /* 40/75 */;
  }
}
</style>
